<template>
    <div class="index">
        <header class="header">
            <PageHeader title="天域人力管理系统" hidden-breadcrumb />
        </header>
        <main class="main">
            <Menu mode="horizontal" @on-select="changeSelect" :active-name="activeName">
                <MenuItem name="notice">
                    <Icon type="ios-paper" />
                    招聘公告
                </MenuItem>
                <MenuItem name="schedule">
                    <Icon type="ios-people" />
                    当前进度
                </MenuItem>
                <MenuItem name="postList">
                    <Icon type="ios-people" />
                    岗位查看
                </MenuItem>
                <MenuItem name="userQ_Asession">
                    <Icon type="ios-construct" />
                    考生问答
                </MenuItem>
            </Menu>
            <!-- <Tabs value="name1">
                <TabPane label="招聘公告" name="name1">
                    <notice></notice>
                </TabPane>
                <TabPane label="当前进度" name="name2">
                    <schedule></schedule>
                </TabPane>
                <TabPane label="岗位查看" name="name3">
                    <postList></postList>
                </TabPane>
                <TabPane label="考生问答" name="name4">
                    <session></session>
                </TabPane>
            </Tabs> -->
            <div class="title_wrapper">
                <div class="title">{{info.title}}</div>
                <div class="apply_tim"><span>报名时间：</span>{{info.apply_time}}</div>
            </div>
            <aside class="slider">
                <div class="apply_entrance">报名入口</div>
                <div class="exam_entrance">准考证打印入口</div>
                <div class="written_entrance">笔试成绩查询入口</div>
                <div class="interview_entrance">面试成绩查询入口</div>
            </aside>
            <div class="view">
                <router-view></router-view>
            </div>
        </main>
        <footer>
            <i-copyright />
        </footer>
    </div>
</template>

<script>
    import iCopyright from '@/components/copyright';
    import notice from './tabs/notice'
    import schedule from './tabs/schedule'
    import postList from './tabs/postList'
    import session from './tabs/Q_Asession'
    export default {
        components: {iCopyright,notice,schedule,postList,session},
        data() {
            return {
                info: {
                    title: "2020年观澜街道办招募社会临聘人员考试",
                    apply_time: "2020年5月9日 00:00:00 - 2020年5月15日 17:00:00"
                },
                activeName: this.$route.name
            }
        },
        watch: {
            activeName() {
                switch (this.activeName) {
                case "notice":
                    this.$router.push({name: "notice"})
                    break;
                case "schedule":
                    this.$router.push({name: "schedule"})
                    break;
                case "postList":
                    this.$router.push({name: "postList"})
                    break;
                case "userQ_Asession":
                    this.$router.push({name: "userQ_Asession"})
                    break;
                default:
                    break;
                }
            }
        },
        methods: {
            changeSelect(index) {
                this.activeName = index
            }
        }
    }
</script>

<style lang="less" scoped>
.index {
    background-color: white;
    .main {
        color: #333;
        .title_wrapper {
            text-align: center;
            height: 176px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            .title {
                font-size: 36px;
                font-weight: bold;
                line-height: 96px;
            }
            .apply_tim {
                font-size: 22px;
                span {
                    font-size: 24px;
                    font-weight: bold;
                }
            }
        }
        .view {
            padding: 20px 10%;
        }
        .slider {
            position: fixed;
            right: 8%;
            .apply_entrance {

            }
            .exam_entrance {
                
            }
        }
    }
}
</style>